<template>
    <div class="">
      <!-- app-container -->
      <div class="head">
        <el-form :model="queryParams" ref="queryForm" :inline="true">
          <el-form-item label="" prop="activityNamePhone">
            <el-input
              v-model="queryParams.activityNamePhone"
              placeholder="活动名称、姓名、手机号"
              clearable
            />
          </el-form-item>
          <el-form-item label="领取时间：" prop="date">
            <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" size="small" range-separator="至" 
              start-placeholder="开始日期" end-placeholder="结束日期" >
            </el-date-picker>
          </el-form-item> 
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="listBox">
        <div class="listBox_head" style="margin-bottom: 14px;">
          <export-excel-button title="领取记录" action="/pop/activity/receive/export" :params="ExportParams" />
        </div>
        <el-table v-loading="loading" :data="tabList" stripe border>
          <el-table-column
            label="序号"
            align="center"
            type="index"
            width="64px"
          />
          <el-table-column
            label="领取时间"
            align="center"
            prop="receiveTime"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="弹窗活动名称"
            align="center"
            prop="activityName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="姓名"
            align="center"
            prop="customerName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="手机号"
            align="center"
            prop="phone"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="领取积分"
            align="center"
            prop="integral"
            :show-overflow-tooltip="true"
            width="150px"
          />
        </el-table>
  
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        ></pagination>
      </div>
      <Dialog
        :id="dialogId"
        :pathType="pathType"
        v-bind="$attrs"
        v-if="dialogVisible"
        :visible.sync="dialogVisible"
        @success="_handleSuccess"
      >
      </Dialog>
    </div>
  </template>
    
    <script>
  import {
    receiveList,
  } from "@/api/consumeMiningManagement/popupActivity";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  
  export default {
    name: "",
    components: {
      ExportExcelButton
    },
    data() {
      return {
        dialogId: "",
        dialogVisible: false,
        // 遮罩层
        loading: false,
        // 导出遮罩层
        // 总条数
        total: 0,
        statusList: [], //状态字典数组
        //表格数据
        tabList: [],
        pathType: "add",
        // 查询参数
        queryParams: {
          startDate: '',
          endDate: '',
          pageNum: 1,
          pageSize: 10,
          activityNamePhone: "", //活动名称
        },
        date: [],
      };
    },
    computed: {
        ExportParams() {
          const params = {
            ...this.queryParams,
          };
          return params;
        },
      },
    created() {
      this.getStatusList();
      this.getList();
    },
    methods: {
      
      //获取活动状态字典
      getStatusList() {
        var dictType = "shenye_trade_punch_activity_order_status";
        this.$getSelectList(dictType)
          .then((res) => {
            var arr = [
              {
                id: "",
                value: "全部",
              },
            ];
            this.statusList = arr.concat(res.result[0].dictList);
          })
          .finally(() => {});
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        if (this.date) {
          this.queryParams.startDate = this.date[0]
          this.queryParams.endDate = this.date[1]
        }
        receiveList(this.queryParams).then((response) => {
          response.result.records.forEach(item => {
            for (var key in item) {
              if (!item[key]) {
                item[key] = "-";
              }
            }
          });
          this.tabList = response.result.records;
          this.total = response.result.total;
          this.loading = false;
        });
      },
      
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.date = []
        this.handleQuery();
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
  };
  </script>
    <style scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }
  
  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
  }
  
  .listBox_head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .img_box {
    width: 100px;
    height: 80px;
    border-radius: 4px;
  }
  </style>
    